<template>
  <div class="apps-page-types">
    <div class="app-form-group-label">终端筛选</div>
    <div
      class="apps-page-type"
      :class="{ 'active': !typeMode }"
      @click="handleChangeType('')"
    >
      <h5><JIcon :icon="DFT_ICONS.all" /> 全部</h5>
      <p></p>
      <em v-text="stats[0]" v-if="stats[0]"></em>
    </div>
    <div
      class="apps-page-type"
      :class="{ 'active': typeMode === 'h5' }"
      @click="handleChangeType('h5')"
    >
      <h5><JIcon :icon="DFT_ICONS.h5" /> H5</h5>
      <p></p>
      <em v-text="stats[26]" v-if="stats[26]"></em>
    </div>
    <div
      class="apps-page-type"
      :class="{ 'active': typeMode === 'web' }"
      @click="handleChangeType('web')"
    >
      <h5><JIcon :icon="DFT_ICONS.web" /> Web</h5>
      <p></p>
      <em v-text="stats[53]" v-if="stats[53]"></em>
    </div>
    <div
      class="apps-page-type"
      :class="{ 'active': typeMode === 'bs' }"
      @click="handleChangeType('bs')"
    >
      <h5><JIcon :icon="DFT_ICONS.big" /> 大屏</h5>
      <p></p>
      <em v-text="stats[17]" v-if="stats[17]"></em>
    </div>
  </div>
  <div class="apps-page-types mt-2">
    <div class="app-form-group-label">类型筛选</div>
    <div
      class="apps-page-type"
      :class="{ 'active': !designMode }"
      @click="handleChangeDesign('')"
    >
      <h5><JIcon :icon="DFT_ICONS.all" /> 全部</h5>
      <p></p>
      <em v-text="getDesignNum('')" v-if="stats[0]"></em>
    </div>
    <div
      class="apps-page-type"
      :class="{ 'active': designMode === 'design' }"
      @click="handleChangeDesign('design')"
    >
      <h5><JIcon :icon="DFT_ICONS.design" /> 设计类</h5>
      <p></p>
      <em v-text="getDesignNum('design')" v-if="getDesignNum('design')"></em>
    </div>
    <div class="apps-page-type" :class="{ 'active': designMode === 'custom' }" @click="handleChangeDesign('custom')">
      <h5><JIcon :icon="DFT_ICONS.custom" /> 定制类</h5>
      <p></p>
      <em v-text="getDesignNum('custom')" v-if="getDesignNum('custom')"></em>
    </div>
    <div class="apps-page-type" :class="{ 'active': designMode === 'link' }" @click="handleChangeDesign('link')">
      <h5><JIcon :icon="DFT_ICONS.link" /> 外链</h5>
      <em v-text="getDesignNum('link')" v-if="getDesignNum('link')"></em>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import _ from 'lodash';
import {api} from "@jzl/api";
import {DFT_ICONS} from "@jzl/icons";

const props = defineProps({
  appId: {
    type: Number,
    required: true
  }
});

const emit = defineEmits(['changeQueryPageType']);

const loading = ref(false);
const typeTab = ref(0);
const typeMode = ref('');
const designMode = ref('');
const stats = ref({});

const TYPES_MAP = {
  '': 0,
  'h5': 26,
  'h5design': 2,
  'h5custom': 6,
  'h5link': 4,

  'web': 53,
  'webdesign': 5,
  'webcustom': 3,
  'weblink': 4,

  'bs': 17,
  'bsdesign': 1,
  'bscustom': 7,
  'bslink': 4,

  'design': 125,
  'custom': 367,
  'link': 4
};

const refresh = () => {
  init();
};

const init = async () => {
  loading.value = true;

  if (props.appId) {
    let statsData = await api.page.pageTypeStat(props.appId);
    let total = 0;

    for (let s in statsData) total += Number(statsData[s] || 0);

    if (statsData) {
      statsData[26] = Number(statsData[2] || 0) + Number(statsData[6] || 0);
      statsData[53] = Number(statsData[3] || 0) + Number(statsData[5] || 0);
      statsData[17] = Number(statsData[1] || 0) + Number(statsData[7] || 0);
      statsData[367] = Number(statsData[3] || 0) + Number(statsData[6] || 0) + Number(statsData[7] || 0);
      statsData[125] = Number(statsData[1] || 0) + Number(statsData[2] || 0) + Number(statsData[5] || 0);
      statsData[0] = total;
    }
    stats.value = statsData;
  }

  loading.value = false;
};

const getDesignNum = (designMode) => {
  let type = `${typeMode.value}${designMode}`;
  let typeReal = TYPES_MAP[type] || 0;
  return _.get(stats.value, typeReal) || 0;
};

const handleCalcTab = () => {
  let type = `${typeMode.value}${designMode.value}`;
  typeTab.value = TYPES_MAP[type] || 0;
  emit("changeQueryPageType", typeTab.value);
};

const handleChangeType = (mode) => {
  typeMode.value = mode;
};

const handleChangeDesign = (dmode) => {
  designMode.value = dmode;
};

onMounted(() => {
  init();
});

watch(() => props.appId, () => {
  init();
});

watch(() => typeMode.value, () => {
  handleCalcTab();
});

watch(() => designMode.value, () => {
  handleCalcTab();
});
</script>

<style lang="scss" scoped>
/* 你的样式代码 */
</style>
